<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue的资源 -->
		<script src="../../js/vue.js"></script>
		<!-- 引入element的相关资源 -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入网络传输库axios的js文件 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入qs（进行参数处理问题）js库 -->
		<script src="../../js/qs.min.js"></script>
		<!-- 图片上传样式 -->
		<style>
		  .avatar-uploader .el-upload {
		    border: 1px dashed #d9d9d9;
		    border-radius: 6px;
		    cursor: pointer;
		    position: relative;
		    overflow: hidden;
		  }
		  .avatar-uploader .el-upload:hover {
		    border-color: #409EFF;
		  }
		  .avatar-uploader-icon {
		    font-size: 28px;
		    color: #8c939d;
		    width: 178px;
		    height: 178px;
		    line-height: 178px;
		    text-align: center;
		  }
		  .avatar {
		    width: 178px;
		    height: 178px;
		    display: block;
		  }
		</style>

		
	</head>
	<body>
		<div id="showUserInfo">
			<!-- 条件搜索 -->
			<div id="selectMsg">
				<el-form :inline="true" :model="loginBean" class="demo-form-inline">
					<el-form-item label="用户名">
						<el-input v-model="loginBean.username" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model="loginBean.useraddress" placeholder="地址"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="selectUserInfo()">查询</el-button>
						<el-button type="success" @click="addUserInfo()">新增</el-button>
						<el-button type="info" @click="clearMethod()">清空</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 显示全部用户信息区域 -->
			<template>
				<el-table ref="multipleTable" :data="UserInfoes" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="#" type="index">
					</el-table-column>
					<el-table-column prop="username" label="用户名" width="120">
					</el-table-column>
					<el-table-column prop="usertel" label="电话" width="120">
					</el-table-column>
					<el-table-column prop="imgsrc" label="头像" width="140">
						<template slot-scope="scope">
							 <el-image
							      style="width: 100px; height: 100px"
							      :src="scope.row.imgsrc"
							      ></el-image>
							
						</template>
					
					</el-table-column>
					<el-table-column prop="useraddress" label="地址" show-overflow-tooltip>			
					</el-table-column>					
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="editUserInfo(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="deleteUserInfo(scope.row.id)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>			
			<!-- 分页组件 -->
			  <div class="block">			  
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="currentPage"
			      :page-sizes="[2, 3, 5, 10]"
			      :page-size="pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
			  </div>
			<!-- 新增/编辑模态框 -->
			<div>
				<el-dialog title="用户信息" :visible.sync="dialogFormVisible">
					<el-form :model="userInfoBean" :rules="rules" ref="userInfoBean" label-width="100px"
						class="demo-ruleForm">
						<el-form-item label="用户名" prop="username">
							<el-input v-model="userInfoBean.username"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="userpwd">
							<el-input v-model="userInfoBean.userpwd"></el-input>
						</el-form-item>
						<el-form-item label="地址" prop="useraddress">
							<el-input v-model="userInfoBean.useraddress"></el-input>
						</el-form-item>
						<el-form-item label="电话" prop="usertel">
							<el-input v-model="userInfoBean.usertel"></el-input>
						</el-form-item>
						<!-- 图片上传 -->
						<el-form-item label="头像上传" prop="usertel">
							<el-upload
							  class="avatar-uploader"							  
							  :show-file-list="false"						  
							  action="#"
							  list-type="picture-card" 
							  :auto-upload="true"
							  :before-upload="beforeUploadForm" 
							  :http-request="imageChange">
							  <img v-if="userInfoBean.imgsrc" :src="userInfoBean.imgsrc" class="avatar">
							  <i v-else class="el-icon-plus avatar-uploader-icon"></i>							
								<div>上传文件</div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取消</el-button>
						<el-button type="primary" @click="saveUserInfo()">确 定</el-button>
					</div>
				</el-dialog>
			</div>

		</div>
		<script>
			var showUserInfo = new Vue({
				el: "#showUserInfo",
				data: {
					// 查询参数对象
					loginBean: {
						username: "",
						useraddress: ""
					},
					// 表格中的数据
					UserInfoes: [],
					dialogFormVisible: false,
					// 新增表单对象
					userInfoBean: {
						id: null,
						username: "",
						userpwd: "",
						useraddress: "",
						usertel: "",
						imgsrc:""
					},
					// 分页相关
					currentPage:1,
					pageSize:5,
					total:0,
					//表单校验
					rules: {
						username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						userpwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
						useraddress: [{
							required: true,
							message: '请输入地址',
							trigger: 'blur'
						}],
						usertel: [{
							required: true,
							message: '请输入电话',
							trigger: 'blur'
						}]
					}
				},
				methods: {
					// 调用查询方法，currentIndex参数表示当前是第几页，currentSize参数表示每页显示几条数据
					selectUserInfo: function(currentIndex,currentSize) {				
						// 当页面初始化的时候，没有传递参数，使用默认的分页参数处理
						if(!currentIndex){
							currentIndex=this.currentPage
						}
						if(!currentSize){
							currentSize=this.pageSize
						}
						// 进行参数序列化处理
						var params = Qs.stringify(this.loginBean)
						params+="&pageNum="+currentIndex+"&pageSize="+currentSize
						console.log(params)
						var that = this
						axios.post("http://localhost:8086/qst_springbootvue20220217/getUserInfoes", params).
						then(function(response) {
							// 获取响应结果
							console.log(response.data)
							that.total=response.data.total
							that.UserInfoes = response.data.list
							that.currentPage=response.data.pageNum
							that.pageSize=response.data.pageSize
						}).
						catch(function(err) {})

					},
					handleSelectionChange: function(val) {
						this.multipleSelection = val;
					},
					// 新增方法
					addUserInfo: function() {
						// 清空表单中的数据
						this.userInfoBean = {
							id: null,
							username: "",
							userpwd: "",
							useraddress: "",
							usertel: "",
							imgsrc:""
						}
						// 弹出新增模态框
						this.dialogFormVisible = true
					},

					// 修改方法
					editUserInfo: function(rowdata) {
						// 进行数据回显（对表单数据对象重新赋值）
						this.userInfoBean = rowdata
						// 弹出dialog框
						this.dialogFormVisible = true
						console.log(rowdata)
					},
					// 删除方法
					deleteUserInfo: function(userid) {
						console.log(userid)
						
						// 消息删除警告
						this.$confirm('此操作将永久删除该该条就, 是否继续?', '提示', {
						          confirmButtonText: '确定',
						          cancelButtonText: '取消',
						          type: 'warning'
						        }).then(() => {
									// 点击确定发送请求
									var that = this
									axios.post("http://localhost:8086/qst_springbootvue20220217/deleteUserInfoById", Qs.stringify({"id":userid})).
									then(function(response) {
										// 获取响应结果
										console.log(response.data)
										
										
										if (response.data == "ok") {
											that.selectUserInfo()
											this.$message({
											  type: 'success',
											  message: '删除成功!'
											});
										}
										
							
									}).
									catch(function(err) {})
									
									
									
						         
						        }).catch(() => {
						          this.$message({
						            type: 'info',
						            message: '已取消删除'
						          });          
						        });
					},
					// 清空操作
					// 思路：1、清空表单中的内容，2、再次查询
					clearMethod: function() {
						this.loginBean = {}
						this.selectUserInfo()
					},
					// 新增、编辑保存数据发送请求
					saveUserInfo: function() {

						// 进行参数序列化处理
						var params = Qs.stringify(this.userInfoBean)
						var that = this
						axios.post("http://localhost:8086/qst_springbootvue20220217/addOrUpdateUserInfo", params).
						then(function(response) {
							// 获取响应结果
							console.log(response.data)
							if (response.data == "ok") {
								that.dialogFormVisible = false
								that.selectUserInfo()
							}



						}).
						catch(function(err) {})
					},
					// 图片上传处理
					// 开始上传前验证
					beforeUploadForm: function(file) {
						// 验证文件类型
						var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
						var extension = testmsg === 'jpeg' ||testmsg === 'jpg' || testmsg === 'png' || testmsg === 'gif'
						if (!extension) {
							this.$message({
								message: '上传文件只能是jpg/png/gif/jpeg格式!',
								duration: 1000,
								showClose: true,
								type: 'warning'
							})
						}
						return extension
					},
					// 提交图片
					imageChange: function(param, type) {
						console.log(param)
						var that=this
						var formData = new FormData()
						formData.append('image', param.file);
						axios.post('http://localhost:8086/qst_springbootvue20220217/upload', formData).then(function(res) {
							that.userInfoBean.imgsrc=res.data
						});
					},
					// 分页处理
					// 当页面条数发生变化的时候会触发，回调结果为页面显示条数
					handleSizeChange(currentPageSize) {					        
							this.selectUserInfo(this.currentPage,currentPageSize)
					      },
					// 当前页发生变化的时候会触发的方法，回调结果为当前页
					handleCurrentChange(currentPageIndex) {
					        this.selectUserInfo(currentPageIndex,this.pageSize)
					      }
					

				},
				// 页面一加载显示所有用户信息
				mounted: function() {
					this.selectUserInfo()
				}




			})
		</script>
	</body>
</html>
